<template>
    <div>
      <sph-typeNav></sph-typeNav>
      <sph-listContainer></sph-listContainer>
      <sph-todayRecommend></sph-todayRecommend>
      <sph-rank></sph-rank>
      <sph-like></sph-like>
      <sph-floor v-for="floor in floors" :key="floor.id" :floor="floor"></sph-floor>
      <sph-brand></sph-brand>
    </div>
</template>

<script>
  import Brand from "./Brand/Brand"
  import Floor from "./Floor/Floor"
  import Like from "./Like/Like"
  import ListContainer from "./ListContainer/ListContainer"
  import Rank from "./Rank/Rank"
  import TodayRecommend from "./TodayRecommend/TodayRecommend"
  import {mapState} from "vuex";
  export default {
    name: "sph-home",
    computed:{
      ...mapState({floors:state=>state.home.floors})
    },
    components:{
      "sph-brand":Brand,
      "sph-floor":Floor,
      "sph-like":Like,
      "sph-listContainer":ListContainer,
      "sph-rank":Rank,
      "sph-todayRecommend":TodayRecommend
    }
  }
</script>

<style scoped>

</style>